<template>
  <div class="d-s-s product-add">
    <!--分类不同样式展示-->
    <div class="model-container flex-1">
      <div class="img-box">
        <el-image
          v-if="form.theme == '0'"
          :src="theme1_url"
          fit="fill"
        ></el-image>
        <el-image
          v-if="form.theme == '1'"
          :src="theme2_url"
          fit="fill"
        ></el-image>
        <el-image
          v-if="form.theme == '2'"
          :src="theme3_url"
          fit="fill"
        ></el-image>
        <el-image
          v-if="form.theme == '3'"
          :src="theme4_url"
          fit="fill"
        ></el-image>
        <el-image
          v-if="form.theme == '4'"
          :src="theme5_url"
          fit="fill"
        ></el-image>
        <el-image
          v-if="form.theme == '5'"
          :src="theme6_url"
          fit="fill"
        ></el-image>
        <el-image
          v-if="form.theme == '6'"
          :src="theme7_url"
          fit="fill"
        ></el-image>
      </div>
    </div>
    <!--图片展示参数-->
    <div class="param-container">
      <div class="form-title">主题选择</div>
      <el-form size="small" :model="form" label-width="100px" class="mt10">
        <el-form-item label="风格：">
          <el-radio-group v-model="form.theme">
            <el-radio-button label="0">主题一</el-radio-button>
            <el-radio-button label="1">主题二</el-radio-button>
            <el-radio-button label="2">主题三</el-radio-button>
            <el-radio-button label="3">主题四</el-radio-button>
            <el-radio-button label="4">主题五</el-radio-button>
            <el-radio-button label="5">主题六</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <!--提交-->
    <div class="common-button-wrapper">
      <el-button
        size="small"
        type="primary"
        @click="onSubmit"
        :loading="loading"
        >保存</el-button
      >
    </div>
  </div>
</template>

<script>
import PageApi from "@/api/page.js";
import theme1 from "@/assets/img/theme1.jpg";
import theme2 from "@/assets/img/theme2.jpg";
import theme3 from "@/assets/img/theme3.jpg";
import theme4 from "@/assets/img/theme4.jpg";
import theme5 from "@/assets/img/theme5.jpg";
import theme6 from "@/assets/img/theme6.jpg";
export default {
  data() {
    return {
      /*是否正在加载*/
      loading: false,
      /*form表单数据*/
      form: {
        theme: "red",
      },
      all_type: [],
      type: [],
      /*是否打开图片选择*/
      isupload: false,
      theme6_url: theme6,
      theme5_url: theme5,
      theme4_url: theme4,
      theme3_url: theme3,
      theme2_url: theme2,
      theme1_url: theme1,
    };
  },
  created() {
    this.getParams();
  },

  methods: {
    /*获取配置数据*/
    getParams() {
      let self = this;
      PageApi.themeDetail({}, true)
        .then((res) => {
          self.form.theme = res.data.theme;
          console.log("theme", self.form.theme);
          self.loading = false;
        })
        .catch((error) => {});
    },

    /*提交*/
    onSubmit() {
      let self = this;
      let params = this.form;
      self.loading = true;
      PageApi.editTheme(params, true)
        .then((data) => {
          self.loading = false;
          ElMessage({
            message: "恭喜你，设置成功",
            type: "success",
          });
          self.$router.push("/page/page/theme/index");
          console.log("theme1", self.form.theme);
        })
        .catch((error) => {
          self.loading = false;
        });
    },
  },
};
</script>
<style lang="scss" scoped="scoped">
.product-add {
  margin: 0;
  padding: 0;
  background: none;
}
.mb10 {
  margin-bottom: 10px;
}

.mr10 {
  margin-right: 10px;
}

.phone-theme > img {
  width: 250px;
}

.d-c-s {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.model-container {
  width: 300px;
  height: calc(100vh - 98px);
  // margin-right: 30px;
  overflow-y: auto;
}

.model-container .img-box .el-image {
  max-width: 362px;
  // height: 645px;
  flex: 1;
  margin-right: 60px;
  margin-bottom: 20px;
  border: 3px solid;
  border-color: rgba(0, 0, 0, 0);
  box-sizing: border-box;
}

.model-container .img-box .el-image.active {
  border-color: #409eff;
}

.model-container .img-box .el-image:last-child {
  margin-right: 0;
}

.model-container .img-box {
  // box-shadow: 0 0 16px 0 rgba(0, 0, 0, .1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 70px 40px 0 40px;
  background-color: #f8fafb;
}

.param-container {
  width: 376px;
  height: calc(100vh - 98px);
  overflow-y: auto;
  background: #fff;
  /* border: 1px solid #cccccc; */
}

.param-container .el-form-item {
  --font-size: 14px !important;
}

.form-title {
  padding: 0 22px;
  height: 62px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  color: #666;
  font-weight: bold;
}

.key-name {
  font-size: 16px;
  color: #666;
  white-space: nowrap;
  margin-right: 30px;
}

.form-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  padding: 10px;
  padding-right: 18px;
}

.form-label {
  width: 122px;
  margin-right: 10px;
  text-align: right;
}
</style>
